{% extends 'layout.html' %}
{% load static %}

{% block css %}
<style>
    .account {
        width: 400px;
        border: 1px solid #dddddd;
        border-radius: 5px;
        box-shadow: 5px 5px 20px #aaa;

        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        padding: 20px 40px;
    }

    .account h2 {
        margin-top: 10px;
        text-align: center;
    }
</style>
{% endblock %}


{% block content %}
<div class="account">
    <h2>用户登录</h2>
    <div class="panel-body">
{#        <form method="post">#}
{#            {% csrf_token %}#}
{#            <div class="form-group">#}
{#                <label>用户名</label>#}
{#                <input type="text" class="form-control" placeholder="用户名" name="username">#}
{#            </div>#}
{#            <div class="form-group">#}
{#                <label>密码</label>#}
{#                <input type="password" class="form-control" placeholder="密码" name="password">#}
{#            </div>#}
{#            <button type="submit" class="btn btn-primary center-block" style="width: 80px;">登录</button>#}
{#        </form>#}
        <form method="post" novalidate>
            {% csrf_token %}
            <div class="form-group">
                <label>用户名</label>
                {{ form.username }}
                <span style="color: red;">{{ form.errors.username.0 }}</span>

            </div>
            <div class="form-group">
                <label>密码</label>
                {{ form.password }}
                <span style="color: red;">{{ form.errors.password.0 }}</span>
            </div>
            <div class="form-group">
                <label for="id_code">图片验证码</label>
                <div class="row">
                    <div class="col-xs-7">
{#                        <input type="text" name="code" class="form-control" placeholder="请输入图形验证码" required="请输入图片验证码" id="id_code">#}
{#                        <span style="color: red"></span>#}
                        {{ form.code }}
                        <span style="color: red">{{ form.code.errors.0 }}</span>
                    </div>
                    <div class="col-xs-5">
{#                        <img id="image_code" src="{% static 'img/code.jpg' %}" style="width: 100px;">#}
{#                        <img id="image_code" src="{% url 'image_code' %}">#}
{#                        <img id="image_code" src="/tools/image/code/">#}
                        <img src="/tools/image/code/" alt="" id="image_code" onclick="this.setAttribute('src','/tools/image/code/?random='+Math.random())">
                    </div>
                </div>
            </div>
            <input type="submit" value="登陆" class="btn btn-primary">
{#            <button type="submit" class="btn btn-primary center-block" style="width: 80px;">登录</button>#}
        </form>
    </div>
</div>
{% endblock %}
